
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>链上猜数字</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/ethers/6.7.0/ethers.min.js"></script>
</head>
<body class="bg-gray-900 text-white">
  <div id="root" class="max-w-2xl mx-auto p-6">
    <h1 class="text-3xl font-bold text-center mb-6">链上猜数字小游戏</h1>

    <div class="bg-gray-800 rounded-lg p-6 mb-4">
      <p class="mb-2">钱包地址：<span id="wallet" class="text-blue-400">未连接</span></p>
      <p class="mb-2">奖池余额：<span id="pool" class="text-green-400">0 ETH</span></p>
      <p>你的胜利次数：<span id="wins" class="text-yellow-400">0</span></p>
    </div>

    <div class="bg-gray-800 rounded-lg p-6 mb-4">
      <label class="block mb-2">输入你的猜测（1–100）：</label>
      <input id="guessInput" type="number" min="1" max="100" class="w-full p-2 rounded bg-gray-700 text-white" placeholder="输入数字" />
      <button id="submitBtn" class="mt-4 w-full bg-blue-600 hover:bg-blue-700 p-2 rounded">提交猜测（0.001 ETH）</button>
    </div>

    <div id="history" class="bg-gray-800 rounded-lg p-6">
      <h2 class="text-xl font-semibold mb-2">历史记录</h2>
      <ul id="historyList" class="list-disc pl-5 space-y-1 text-sm"></ul>
    </div>
  </div>

  <script>
    const CONTRACT_ABI = [
      "function guess(uint256 _guess) external payable",
      "function prizePool() view returns (uint256)",
      "function getUserGuesses(address) view returns (uint256[])",
      "function getUserWins(address) view returns (uint256)",
      "event GuessSubmitted(address indexed player, uint256 guess, uint256 target, bool won, uint256 reward)",
      "event PrizePoolUpdated(uint256 newPool)"
    ];
    const CONTRACT_ADDRESS = "0xYourDeployedContractAddress"; // 替换为实际部署地址

    let signer, contract;

    async function connectWallet() {
      if (!window.ethereum) return alert("请安装 MetaMask");
      const provider = new ethers.BrowserProvider(window.ethereum);
      await provider.send("eth_requestAccounts", []);
      signer = await provider.getSigner();
      contract = new ethers.Contract(CONTRACT_ADDRESS, CONTRACT_ABI, signer);
      document.getElementById("wallet").textContent = await signer.getAddress();
      loadData();
    }

    async function loadData() {
      const address = await signer.getAddress();
      const pool = await contract.prizePool();
      const wins = await contract.getUserWins(address);
      document.getElementById("pool").textContent = ethers.formatEther(pool) + " ETH";
      document.getElementById("wins").textContent = wins.toString();
      const guesses = await contract.getUserGuesses(address);
      const list = document.getElementById("historyList");
      list.innerHTML = "";
      guesses.forEach(g => {
        const li = document.createElement("li");
        li.textContent = `猜测：${g}`;
        list.appendChild(li);
      });
    }

    document.getElementById("submitBtn").addEventListener("click", async () => {
      const val = parseInt(document.getElementById("guessInput").value);
      if (val < 1 || val > 100) return alert("请输入 1–100 的数字");
      try {
        const tx = await contract.guess(val, { value: ethers.parseEther("0.001") });
        await tx.wait();
        alert("猜测已提交！");
        loadData();
      } catch (err) {
        alert("交易失败：" + err.message);
      }
    });

    connectWallet();
  </script>
</body>
</html>
